<template>
    <div class="bidding-style">
        <div class="introduce">
            <div>
                <span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:#3b68ff"></span>
                数量(个)及占比
            </div>
            <div>
                <span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:#ff8f00"></span>
                金额(万元)及占比
            </div>
        </div>

        <div class="gkzb">
            <div class="title">公开招标</div>
            <div 
            class="num" 
            :style="{
                width:`${gkNumWidth}%`,
                minWidth:'80PX'
            }"
            >
                {{`${info.gk.num}个(${gkNumPercentage}%)`}}
            </div>
            <div 
            class="money"
            :style="{
                width:`${gkMoneyWidth}%`,
                minWidth:'80PX'
            }"
            >
                {{`${info.gk.money}(${gkMoneyPercentage}%)`}}
            </div>
        </div>

        <div class="xbcg">
            <div class="title">询比采购</div>
            <div 
            class="num" 
            :style="{
                width:`${xbNumWidth}%`,
                minWidth:'80PX'
            }"
            >
                {{`${info.xb.num}个(${xbNumPercentage}%)`}}
            </div>
            <div 
            class="money"
            :style="{
                width:`${xbMoneyWidth}%`,
                minWidth:'80PX'
            }"
            >
                {{`${info.xb.money}(${xbMoneyPercentage}%)`}}
            </div>
        </div>


        <!-- <div v-html="test"></div> -->
    </div>
</template>

<script>
import MyMath from '@/pages/user/center/mixins/math';

export default {
    mixins: [MyMath],
    components: {
        
    },
    props: {
        options: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            info:{
                gk:{
                    num:2,
                    money:1
                },
                xb:{
                    num:1,
                    money:1
                }
            },
            // test:"<div class=\"df-box\" style=\"width:100%;\"> \n <div class=\"panel-t\">\n  石家庄市行政审批局关于推行工程建设项目招标计划提前发布和合同订立信息公示的通知\n </div> \n <div class=\"panel-i\"> \n  <span>数据来源：市本级</span> \n  <span>发布时间：2022-04-13 17:29:01&nbsp;</span> \n  <span>浏览次数：<span id=\"views\"></span>&nbsp;</span> \n </div> \n <div class=\"panel-c\" style=\"width:100%;min-height: 400px;\"> \n  <p style=\"text-align: center;\"><img src=\"/u/cms/com.ggzyjy.www/202207/041151215k8k.png\" style=\"float:none;\" title=\"22.png\"></p>\n  <p style=\"text-align: center;\"><img src=\"/u/cms/com.ggzyjy.www/202207/041151214zpi.png\" style=\"float:none;\" title=\"33.png\"></p>\n  <p><br></p> \n  <a href=\"/u/cms/com.ggzyjy.www/202204/13172849w7qz.pdf\">石家庄市行政审批局关于推行工程建设项目招标计划提前发布和合同订立信息公示的通知.pdf</a>\n  <br> \n </div> \n</div>"
        };
    },
    computed: {
        gkNumPercentage(){
            let num1 = this.info.gk.num,
                num2 = this.info.xb.num,
                sum = this.accAdd(num1,num2),
                per = this.accMul(this.accDiv(num1,sum),100);
                per = Math.round(Number(per));
            return per   
        },
        gkMoneyPercentage(){
            let money1 = this.info.gk.money,
                money2 = this.info.xb.money,
                sum = this.accAdd(money1,money2),
                per = this.accMul(this.accDiv(money1,sum),100);
                per = Math.round(Number(per));
            return per
        },
        gkNumWidth(){
            let num = 50,
                per = this.accMul(this.accDiv(this.gkNumPercentage,100),num);
                per = Math.round(Number(per));
            return per
        },
        gkMoneyWidth(){
            let num = 50,
                per = this.accMul(this.accDiv(this.gkMoneyPercentage,100),num);
                per = Math.round(Number(per));
            return per
        },
        xbNumPercentage(){
            let per = this.accSub(100,this.gkNumPercentage);
            return per   
        },
        xbMoneyPercentage(){
            let per = this.accSub(100,this.gkMoneyPercentage);
            return per   
        },
        xbNumWidth(){
            let per = this.accSub(50,this.gkNumWidth);
            return per   
        },
        xbMoneyWidth(){
            let per = this.accSub(50,this.gkMoneyWidth);
            return per   
        },
    },
    watch: {},
    methods: {
        
    },
    mounted() {
        
    },
};
</script>

<style lang="scss" scoped>
@import "@css/var.scss";
.bidding-style {
    position: relative;
    padding-top: 40px;
    .introduce {
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: 0;
        right: 0;
        width: 250px;
    }
    .gkzb {
        display: flex;
        align-items: baseline;
        
        .title{
            font-weight: 600;
            margin-right: 10px;
        }

        .num{
            background-color: #3b68ff;
            display: flex;
            justify-content: center;
            padding: 5px;
            color: white;
        }

        .money{
            background-color: #ff8f00;
            display: flex;
            justify-content: center;
            padding: 5px;
            color: white;
        }
    }

    .xbcg {
        display: flex;
        align-items: baseline;
        margin-top: 20px;
        
        .title{
            font-weight: 600;
            margin-right: 10px;
        }

        .num{
            background-color: #3b68ff;
            display: flex;
            justify-content: center;
            padding: 5px;
            color: white;
        }

        .money{
            background-color: #ff8f00;
            display: flex;
            justify-content: center;
            padding: 5px;
            color: white;
        }
    }
}
</style>